<template></template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      required: false,
      default: true
    }
  },
  watch: {
    show: function(newValue, oldValue) {
      let live2dWidget = document.getElementById("live2d-widget");
      if (newValue) {
        live2dWidget.style.display = "unset";
      } else {
        live2dWidget.style.display = "none";
      }
    }
  },
  mounted: function() {
    let script = document.createElement("script");
    script.type = "text/javascript";
    script.src = `https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js`;
    document.body.appendChild(script);
    let vm = this;
    script.onload = function() {
      L2Dwidget.init({
        model: {
          jsonPath:
            "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json",
          scale: 1
        },
        display: {
          position: "left",
          width: 120,
          height: 240,
          hOffset: 5,
          vOffset: -20
        },
        mobile: {
          show: true,
          scale: 0.5
        },
        react: {
          opacityDefault: 0.7,
          opacityOnHover: 0.2
        }
      });
    };
  }
};
</script>

<style>
</style>